<template>
	<div class="box" style="background: #f1f1f1;padding: 0;margin: 0;">

		<div class="centent">
			<ul class="left">
				<li @click='isShowaccountBook = true'>
					<van-icon name="add" />
				</li>

				<li :class="classifyMax == item.identification ? 'action' : ''" v-for="(item,index) in leftList"
					:key="index" @click='cut($event , item)' style="position: relative;">
					{{item.name}}


					<span style="position: absolute;top: 50%;right: 10px;transform: translateY(-50%);" id='del'
						@click='delLeft(item)'><van-icon id='del' name="cross" /></span>
				</li>

			</ul>
			<ul class="righe">
				<li style="display: flex;">
					<van-icon name="add" @click="addRight" />
					<input style="margin-left: 10px;" type="text" placeholder="请输入要搜索的键名" @input="getInitRight()" v-model="seach.name">
				</li>
				<li v-for="(item,index) in rightList" :key="index" style="position: relative;">
					<p>键名：{{item.name}}</p>
					<p>键值：{{item.price}}</p>
					<p>分类：{{item.classify}}</p>
					<p>父类标识：{{item.identification}}</p>
					<p>备注：{{item.remark}}</p>
					<span
						style="padding: 5px 10px; background-color: cornflowerblue;color: #fff;border-radius: 5px;position: absolute;bottom: 10px; right: 10px;"
						@click='updateRight(item)'>修改</span>

					<van-icon id='del' name="cross" style="position: absolute;top: 5px;right: 5px;"
						@click='delRight(item)' />

				</li>
			</ul>
		</div>

		<van-popup :show="isShowaccountBook" @close='isShowaccountBook = false' position="top"
			custom-style="height: 50%;">
			<div style="position: relative;height: 100%;">
				<van-field :value="obj.name" clearable label="字典项名称" placeholder="请输入字典项名称"
					@change="(e)=>{obj.name = e.detail}" />

				<van-field :value="obj.identification" clearable label="字典项标识" placeholder="请输入字典项标识"
					@change="(e)=>{obj.identification = e.detail}" />

				<button class="amusingBtn1" @click="add">{{obj._id ? '修 改' : '创 建'}}</button>
			</div>
		</van-popup>

		<!-- 右侧的值 -->
		<van-popup :show="isShowaccountBook1" @close='isShowaccountBook1 = false' position="top"
			custom-style="height: 50%;">
			<div style="position: relative;height: 100%;">
				<van-field :value="obj.name" clearable label="键名" placeholder="请输入键名"
					@change="(e)=>{obj.name = e.detail}" />

				<van-field :value="obj.price" clearable label="键值" placeholder="请输入键值"
					@change="(e)=>{obj.price = e.detail}" />

				<van-field :value="obj.classify" clearable label="分类" placeholder="请输入分类"
					@change="(e)=>{obj.classify = e.detail}" />

				<van-field :value="obj.identification" clearable label="父类标识" readonly placeholder="请输入父类标识"
					@change="(e)=>{obj.identification = e.detail}" />

				<van-field :value="obj.remark" clearable label="备注" placeholder="请输入备注"
					@change="(e)=>{obj.remark = e.detail}" />

				<button class="amusingBtn1" @click="addchilren">{{obj._id ? '修 改' : '创 建'}}</button>
			</div>
		</van-popup>




	</div>
</template>

<script>
	export default {
		data() {
			return {
				isShowaccountBook: false,
				isShowaccountBook1: false,

				obj: {},
				
				seach:{
					name:''
				},

				leftList: [],
				rightList: [],

				// 当前分类大项id
				classifyMax: ''
			}
		},

		onShow() {
			this.getInitLetf(true)
		},

		methods: {
			// 获取左边数据
			async getInitLetf(flag) {
				let result = await this.$axios('overallSituation', {
					databaseName: 'dataDictionary',
					state: 'look',
				}, false)

				if (result.code == 200) {
					this.leftList = result.data
					this.classifyMax = this.classifyMax ? this.classifyMax : this.leftList[0].identification
					if (flag) {
						this.getInitRight()
					}
				}
			},

			// 获取右边数据
			async getInitRight() {
				let result = await this.$axios('overallSituation', {
					databaseName: 'dataDictionaryDetail',
					state: 'look',
					identification: this.classifyMax,
					name:this.seach.name
				}, true)

				if (result.code == 200) {
					this.rightList = result.data
				}
			},

			// 添加左边
			async add() {
				console.log(this.obj);

				let result = await this.$axios('overallSituation', {
					databaseName: 'dataDictionary',
					state: 'add',
					...this.obj
				}, false)
				console.log(result);
				if (result.code == 200) {
					this.isShowaccountBook = false
					this.getInitLetf()
					this.obj = {}
				}

			},

			// 删除左边
			delLeft(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除这个字典项吗？',
					success: function(res) {
						if (res.confirm) {

							that.$axios('overallSituation', {
								databaseName: 'dataDictionary',
								state: 'delete',
								_id: item._id
							}).then(res => {
								if (res.code == 200) {
									that.getInitLetf()
								}
							})

						} else {
							// 执行取消后的操作

						}
					}
				})
			},

			// 删除右边
			delRight(item) {
				console.log(item, 'item');
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除这个字典项吗？',
					success: function(res) {
						if (res.confirm) {

							that.$axios('overallSituation', {
								databaseName: 'dataDictionaryDetail',
								state: 'delete',
								_id: item._id
							}).then(res => {
								if (res.code == 200) {
									that.getInitRight()
								}
							})

						} else {
							// 执行取消后的操作

						}
					}
				})
			},

			// 修改右边
			updateRight(item) {
				this.obj = item
				this.isShowaccountBook1 = true
			},

			// 添加右边
			async addchilren() {
				console.log(this.obj);
				let result = await this.$axios('overallSituation', {
					databaseName: 'dataDictionaryDetail',
					state: this.obj._id ? 'update' : 'add',
					...this.obj,
				}, false)
				console.log(result);
				if (result.code == 200) {
					this.isShowaccountBook1 = false
					this.getInitRight()
					this.obj = {}
				}
			},

			// 点击右边添加按钮
			addRight() {
				this.isShowaccountBook1 = true
				this.obj.identification = this.classifyMax
			},

			// 点击左边 筛选右边
			cut(e, item) {
				if (e.target.id == 'del') return
				if(this.classifyMax == item.identification) return 
				this.classifyMax = item.identification
				this.getInitRight()
			}
		}
	}
</script>

<style scoped>
	.dataList {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.centent {
		width: 100%;
		height: 98%;
		background: #f1f1f1;
		display: flex;

	}

	.centent .left {
		width: 30%;
		height: 100%;
		overflow-y: scroll;
		border-right: 1px solid #999;
	}

	.centent .left li {
		width: 100%;
		height: 40px;
		background: #fff;
		font-size: 0.8rem;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.centent .left .action {
		background: #4cd137 !important;
		color: #fff;
	}

	.centent .righe {
		width: 70%;
		height: 100%;
		overflow-y: scroll;
		padding: 10px;
		box-sizing: border-box;
	}

	.centent .righe li {
		width: 100%;
		background-color: #fff;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.6);
		margin-bottom: 10px;
		font-size: 0.8rem;
		font-weight: 700;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 10px;
	}
</style>